<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>搜索页</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <script>
      // 设置当前时间
      document.addEventListener("DOMContentLoaded", function () {
        const timeElement = document.querySelector(".time");
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, "0");
        const minutes = now.getMinutes().toString().padStart(2, "0");
        timeElement.textContent = `${hours}:${minutes}`;
      });
    </script>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 搜索栏 -->
      <div class="flex items-center px-4 py-2">
        <div class="search-box flex-1">
          <i class="fas fa-search"></i>
          <input type="text" placeholder="搜索应用、游戏" autofocus />
        </div>
        <button class="ml-2 text-blue-500 font-medium">取消</button>
      </div>

      <!-- 主要内容区域 -->
      <div class="content">
        <!-- 热搜榜 -->
        <div class="section-title">
          <span>热搜榜</span>
        </div>
        <div class="px-4">
          <div class="flex items-center py-3 border-b border-gray-100">
            <div
              class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center font-bold mr-4"
            >
              1
            </div>
            <div class="flex-1">
              <div class="font-medium">抖音</div>
              <div class="text-sm text-gray-500">短视频</div>
            </div>
            <div class="text-sm text-gray-400">9854万</div>
          </div>
          <div class="flex items-center py-3 border-b border-gray-100">
            <div
              class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center font-bold mr-4"
            >
              2
            </div>
            <div class="flex-1">
              <div class="font-medium">微信</div>
              <div class="text-sm text-gray-500">社交</div>
            </div>
            <div class="text-sm text-gray-400">8721万</div>
          </div>
          <div class="flex items-center py-3 border-b border-gray-100">
            <div
              class="w-6 h-6 bg-yellow-500 text-white rounded-full flex items-center justify-center font-bold mr-4"
            >
              3
            </div>
            <div class="flex-1">
              <div class="font-medium">王者荣耀</div>
              <div class="text-sm text-gray-500">游戏</div>
            </div>
            <div class="text-sm text-gray-400">6532万</div>
          </div>
          <div class="flex items-center py-3 border-b border-gray-100">
            <div
              class="w-6 h-6 bg-gray-300 text-white rounded-full flex items-center justify-center font-bold mr-4"
            >
              4
            </div>
            <div class="flex-1">
              <div class="font-medium">QQ音乐</div>
              <div class="text-sm text-gray-500">音乐</div>
            </div>
            <div class="text-sm text-gray-400">5471万</div>
          </div>
          <div class="flex items-center py-3 border-b border-gray-100">
            <div
              class="w-6 h-6 bg-gray-300 text-white rounded-full flex items-center justify-center font-bold mr-4"
            >
              5
            </div>
            <div class="flex-1">
              <div class="font-medium">支付宝</div>
              <div class="text-sm text-gray-500">工具</div>
            </div>
            <div class="text-sm text-gray-400">4856万</div>
          </div>
        </div>

        <!-- 搜索历史 -->
        <div class="section-title">
          <span>搜索历史</span>
          <span class="section-more"><i class="fas fa-trash-alt"></i></span>
        </div>
        <div class="px-4">
          <div class="flex flex-wrap">
            <div class="bg-gray-100 text-gray-700 rounded-full px-4 py-2 m-1">
              <div class="flex items-center">
                <i class="fas fa-clock text-gray-400 mr-2 text-xs"></i>
                <span>原神</span>
              </div>
            </div>
            <div class="bg-gray-100 text-gray-700 rounded-full px-4 py-2 m-1">
              <div class="flex items-center">
                <i class="fas fa-clock text-gray-400 mr-2 text-xs"></i>
                <span>微信读书</span>
              </div>
            </div>
            <div class="bg-gray-100 text-gray-700 rounded-full px-4 py-2 m-1">
              <div class="flex items-center">
                <i class="fas fa-clock text-gray-400 mr-2 text-xs"></i>
                <span>高德地图</span>
              </div>
            </div>
            <div class="bg-gray-100 text-gray-700 rounded-full px-4 py-2 m-1">
              <div class="flex items-center">
                <i class="fas fa-clock text-gray-400 mr-2 text-xs"></i>
                <span>剪映</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 推荐分类 -->
        <div class="section-title">
          <span>推荐分类</span>
        </div>
        <div class="grid grid-cols-4 gap-2 px-4">
          <div class="bg-blue-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-gamepad text-blue-500 text-xl mb-2"></i>
            <span class="text-sm">游戏</span>
          </div>
          <div class="bg-green-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-book text-green-500 text-xl mb-2"></i>
            <span class="text-sm">教育</span>
          </div>
          <div class="bg-yellow-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-video text-yellow-500 text-xl mb-2"></i>
            <span class="text-sm">视频</span>
          </div>
          <div class="bg-red-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-music text-red-500 text-xl mb-2"></i>
            <span class="text-sm">音乐</span>
          </div>
          <div class="bg-purple-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-palette text-purple-500 text-xl mb-2"></i>
            <span class="text-sm">艺术</span>
          </div>
          <div class="bg-indigo-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-heart text-indigo-500 text-xl mb-2"></i>
            <span class="text-sm">健康</span>
          </div>
          <div class="bg-pink-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-shopping-bag text-pink-500 text-xl mb-2"></i>
            <span class="text-sm">购物</span>
          </div>
          <div class="bg-gray-50 rounded-lg p-3 flex flex-col items-center">
            <i class="fas fa-ellipsis-h text-gray-500 text-xl mb-2"></i>
            <span class="text-sm">更多</span>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>
  </body>
</html>
